<template>
	<view class="item_wrap">
		<view class="box-wrap">
			{{boxData1}}
		</view>
		<view class="loading-dots">
			<view class="dot dot-1"></view>
			<view class="dot dot-2"></view>
			<view class="dot dot-3"></view>
			<view class="dot dot-4"></view>
			<view class="dot dot-5"></view>
			<view class="dot dot-6"></view>
			<view class="dot dot-7"></view>
		</view>
		<view class="box-wrap">
			{{boxData2}}
		</view>
		<view class="box_btn" @click="sendTask(boxData1)" style="z-index: 999;">
			下发任务
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			boxData1: String,
			boxData2: String,
		},
		methods: {
			sendTask(key) {
				this.$emit('sentTask', key)
			}
		}
	}
</script>

<style scoped>
	.item_wrap {
		width: 100vw;
		height: 20vh;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.loading-dots {
		width: 40vw;
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.dot {
		width: 2.45vw;
		height: 2.45vw;
		background-color: #fff;
		border-radius: 50%;
		opacity: 1;
		animation: blink 7s infinite ease-in-out;
	}

	.dot-1 {
		animation-delay: 0s;
	}

	.dot-2 {
		animation-delay: 1s;
	}

	.dot-3 {
		animation-delay: 2s;
	}

	.dot-4 {
		animation-delay: 3s;
	}

	.dot-5 {
		animation-delay: 4s;
	}

	.dot-6 {
		animation-delay: 5s;
	}

	.dot-7 {
		animation-delay: 6s;
	}

	@keyframes blink {

		0% {
			opacity: 0;
		}

		20% {
			opacity: 0.8;
		}

		100% {
			opacity: 1;
		}

	}

	.box_btn {
		width: 17vw;
		height: 9.16vh;
		border-radius: 1vh;
		font-size: 3.98vh;
		color: #004ea1;
		background-color: #bcd500;
		font-weight: bolder;
		line-height: 9.16vh;
		text-align: center;
	}

	.box-wrap {
		width: 10vw;
		height: 11vh;
		background-image: url(../../static/box.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		bottom: 2.48vh;
		font-size: 4.05vh;
		color: #004ea1;
		font-weight: bolder;
		line-height: 16vh;
		text-align: center;
	}
</style>